//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');
// 当前页面样式
require('./home.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

//引入swiper库
//ES6方式
import Swiper, { Pagination, Autoplay } from 'swiper';
//引入swiper样式
import 'swiper/swiper-bundle.css';

// 3.当前页面的js
dom.ready(function () {
        //加载底部菜单
        dom.bMenu('home');

    //轮播图
    //申明一下需要使用哪些模块
    Swiper.use([Pagination, Autoplay])
    //配置插件
    new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        }
    })

   
    //获取个人信息
    function getUserInfo() {
        https.get('/api/user/info', function (res) {
            //解构赋值
            let {errno,data}=res;
            //判定
            if(errno==0){
                //解构赋值
                let {ranking,badges,clockCount}=data;
                //渲染数据到页面指定位置
                dom.getEle('#rankTxt').innerHTML=ranking;
                dom.getEle('#badgesTxt').innerHTML=badges;
            }
        })
    }

    //当页面加载时就获取当前用户信息
    getUserInfo();

    //打卡功能实现:
        //功能一:处理按钮上是否打卡文字 
        function getClock(){
            https.get('/api/user/clockInInfo',function(res){
                // console.log(res);
                //解构赋值
                let {errno,data}=res;
                //判定
                if(errno==0){
                    dom.getEle('#clockBtn').innerHTML=data.isClockIn?'已经打卡':'今日打卡';
                    dom.getEle('#clockTxt').innerHTML=data.clockCount;
                }
            })
        }
        //当页面加载时调用
        getClock();

        //功能二:打卡
           dom.addEvent('#clockBtn',function(){
                https.post('/api/user/clockIn',{},function(res){
                    //判定
                    if(res.errno==0){
                        alert('打卡成功');
                        //渲染按钮上的文字
                        getClock()
                    }else{
                        alert('打卡失败')
                    }
                })
           }) 

})